<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link href="https://cdn.bootcss.com/element-ui/2.13.0/theme-chalk/index.css" rel="stylesheet">

</head>

<body>
    <div id="app">
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-button @click="visible = true">Button</el-button>
                    <el-dialog :visible.sync="visible" title="Hello world">
                        <p>Try Element</p>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="12">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="12" :offset="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-around">
            <el-col :span="4">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :span="5">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">
                <div class="grid-content bg-purple-light"></div>
            </el-col>
        </el-row>
        <el-container>
            <el-header>Header</el-header>

            <el-container>
                <el-aside width="200px">Aside</el-aside>
                <el-main>Main</el-main>

            </el-container>
            <el-footer>Footer</el-footer>
        </el-container>
        <template>
            <el-backtop></el-backtop>
        </template>

        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi asperiores, consequuntur veniam fugit quod
            natus corrupti voluptatibus ipsa similique consectetur cumque dolorum! Inventore aperiam facilis corporis
            veniam, amet ducimus? Harum!
        </p>

    </div>
    <!-- import Vue before Element -->
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <!-- import JavaScript -->
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: function () {
                return { visible: false }
            }
        })
    </script>
    <style>
        .el-row {
            margin-bottom: 20px;

            &:last-child {
                margin-bottom: 0;
            }
        }

        .el-col {
            border-radius: 4px;
        }

        .bg-purple-dark {
            background: #99a9bf;
        }

        .bg-purple {
            background: #d3dce6;
        }

        .bg-purple-light {
            background: #e5e9f2;
        }

        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }

        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }

        .el-header,
        .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body>.el-container {
            margin-bottom: 40px;
        }

    </style>
</body>

</html>
